<template>
<view>
	<view class="header">客户预约</view>
	<view class="mark_input">
		<view class="mark_input_title">服务卡名称:</view>
		<picker class="mark_picker" @change="bindCardIndex" :value="cardIndex" :range="card"
		range-key="card_name" v-if="card.length > 0">
			{{card[cardIndex]['card_name']}}
			<image class="picker_img" src="/static/img/buttom.png"></image>
		</picker>
	</view>
	<view class="list_center_item" v-if="goods">
		<view class="item_top">使用物品</view>
		<view class="item_content1" v-for="(item,index) in goods" :key="index">
			<text class="oneChild">{{item.name}}</text>
			<text class="twoChild">{{item.use_num}}个/次</text>
		</view>
	</view>
	<view class="list_center_item" v-if="manual">
		<view class="item_top">使用手工</view>
		<view class="item_content1">
			<text class="oneChild">{{manual[0]}}</text>
			<text class="twoChild">{{manual[1]}}次</text>
		</view>
	</view>
	<view class="mark_input">
		<view class="mark_input_title">预约日期:</view>
		<picker mode="date" :value="date" @change="bindDate">
			<view>{{form.date ? form.date : '请选择日期'}}</view>
		</picker>
	</view>
	<view class="mark_input">
		<view class="mark_input_title">预约时间:</view>
		<picker mode="time" :value="time" @change="bindTime">
			<view>{{form.time ? form.time : '请选择日期'}}</view>
		</picker>
	</view>
	<table border="0" width="100%" cellspacing="0" cellpadding="0">
		<tr>
			<td>美容师</td>
			<td>预约时间</td>
			<td v-if="oaRole == 1 || oaRole == 3">操作</td>
		</tr>
		<tr v-for="(item,index) in userArr">
			<td>{{item.name}}</td>
			<td>{{item.markTime}}</td>
			<td v-if="oaRole == 1 || oaRole == 3">
				<img class="picker_img1" @click="del(index)" src="/static/img/none_delete.png" alt="">
			</td>
		</tr>
	</table>
	
	<view class="pub_add" @click="formClick" v-if="oaRole == 1 || oaRole == 3">
		<img src="/static/img/pub.png" alt="">
		<text>选择美容师</text>
	</view>
	<view class="mark_remark">备注</view>
	<textarea class="text_remark" auto-height maxlength="-1" v-model="form.remark"/>
	<view class="bottom_remark">天意美业直通车</view>
	<button v-if="addTrue" @click="add" class="buttonClass">提交</button>
	
	<view class="formBg" v-if="formAddShow">
		<view class="form">
			<view class="form_title">选择美容师</view>
			<view class="view_input">
				<view class="view_goods_title">选择美容师:</view>
				<picker class="view_goods_picker" @change="bindUser" :value="UserIndex" 
				:range="userList" range-key="name" v-if="userList.length > 0">
					<view>
						{{userList[UserIndex]['name']}}
						<image class="picker_img" src="/static/img/buttom.png"></image>
					</view>
				</picker>
			</view>
			<view class="view_input">
				<view class="view_goods_title">预约时间:</view>
				<picker mode="time" :value="time" @change="bindMarkTime">
					<view class="uni-input weui-input">{{markTime ? markTime : '请选择时间'}}</view>
				</picker>
			</view>
			<view class="form_footer">
				<view class="ok" @click="ok">确定</view>
				<view class="close" @click="close">取消</view>
			</view>
		</view>
	</view>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	data() {
		return {
			oaRole:0,
			member_id:0,
			card:[],
			manual:[],
			goods:[],
			form:{
				card_id:0,
				date:'',
				time:''
			},
			addTrue:true,
			cardIndex:0,
			
			
			formAddShow:false,
			userArr:[],
			userList:[],
			UserIndex:0,
			markTime:'',
			date:'2021-05-01',
			time:'',
			arr:{}
		}
	},
	//组件生命周期
	onLoad:function(e){
		this.oaRole = uni.getStorageSync('oaRole')
		if(uni.getStorageSync('oaRole') == 2){
			this.userArr = [
				{
					id:uni.getStorageSync('uid'),
					name:'张三'
				}
			]
		}
		uni.showLoading({
		    title: '加载中'  
		});
		this.member_id = e.id
		this.getCard()
	},
	methods:{
		getCard:function(){
			var data = {
				oa_id:uni.getStorageSync('oa_id'),
				member_id:this.member_id
			}
			var that = this
			request({
				url: 'manage/card/userCardAll',
				method: 'get',
				data:data,
				success: (res) => {
					uni.hideLoading()
					that.card = res.data.data
					that.manual = res.data.data[0]['manual_name']
					that.goods = res.data.data[0]['goods']
					that.form.card_id = res.data.data[0]['card_id']
					that.form.order_id = res.data.data[0]['id']
				},
			})
		},
		formClick:function(){
			this.formAddShow = true
			if(this.userList.length > 0){
				this.arr.id = this.userList[0].uid
				this.arr.name = this.userList[0].name
			}else{
				this.getList()
			}
		},
		getList:function(){
			var data = {
				oa_id:uni.getStorageSync('oa_id'),
			}
			var that = this
			request({
				url: 'manage/user/all',
				method: 'get',
				data:data,
				success: (res) => {
					that.userList = res.data.data
					that.arr.id = res.data.data[0].uid
					that.arr.name = res.data.data[0].name
				},
			})
		},
		bindCardIndex:function(e){
			this.cardIndex = e.detail.value
			this.form.card_id = this.card[e.detail.value].card_id
			this.form.order_id = this.card[e.detail.value].id
			this.manual = this.card[e.detail.value]['manual_name']
			this.goods = this.card[e.detail.value]['goods']
		},
		bindDate:function(e){
			this.date = e.detail.value
			this.form.date = e.detail.value
		},
		bindTime:function(e){
			this.time = e.detail.value
			this.form.time = e.detail.value
			if(uni.getStorageSync('oaRole') == 2){
				this.userArr[0]['markTime'] = e.detail.value
				//this.$forceUpdate();
			}
		},
		bindMarkTime:function(e){
			this.markTime = e.detail.value
			this.arr.markTime = e.detail.value
		},
		bindUser:function(e){
			this.UserIndex = e.detail.value
			let info = this.userList[e.detail.value]
			if(info.realname){
				var arr = {id:info.uid,name:info.realname}
			}else{
				var arr = {id:info.uid,name:info.name}
			}
			this.arr = arr
		},
		ok:function(){
			if(!this.arr.markTime){
				uni.showToast({
					title: '请输入预约时间!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			var userArr = this.userArr
			this.userArr = userArr.concat(this.arr)
			this.arr = {}
			this.formAddShow = false
		},
		close:function(){
			this.formAddShow = false
		},
		del:function(index){
			this.userArr.splice(index,1)
		},
		add:function(){
			if(!this.form.date || !this.form.time){
				uni.showToast({
					title: '请输入预约时间!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			
			if(this.userArr.length == 0){
				uni.showToast({
					title: '请选择美容师!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			this.form.member_id = this.member_id
			this.form.oa_id = uni.getStorageSync('oa_id')
			var data = {
				form:this.form,
				manual:this.userArr
			}
			request({
				url: 'manage/mark/add',
				method: 'post',
				data:data,
				success: (res) => {
					if(res.data.code == 1){
						uni.showToast({
							title:'预约成功',
							icon: 'none',
							duration: 2000,
							success() {
								setTimeout(function() {
									uni.navigateBack()
								}, 2000);
							}
						})
					}else{
						uni.showToast({
							title:res.data.msg,
							icon: "none", 
							position:'bottom',
						});
						return;
					}
				},
			})

		}
	}
}
</script>
<style>
@import url("../css/mark/addMark.css");
</style>